<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀</title>
  <!-- 重置css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- 顶部横幅 -->
  <div class="top-banner">
    <div class="banner-inner">
      <div class="logo fl">
        <a href="#"></a>
      </div>
      <div class="advert fl">
        <img src="imgs/advert_small.jpg" class="small" alt="">
        <img src="imgs/advert_big.jpg" class="big" alt="">
      </div>
      <div class="menu fr">
        <div class="menu1 fl">成长守护平台</div>
        <div class="menu2 fl">腾讯游戏热门推荐</div>
        <!-- https://game.gtimg.cn/images/js/title/title_game_rank.html?rd=0.44639107923073884 -->
        <div class="ost-pop">
          <div class="ost-client fl">
            <div class="ost-title">客户端游戏</div>
            <div class="ost-list">
              <div class="ost-rank-col fl">
                <h2 class="ost-rank-title ost-client-hot">
                  热门推荐
                </h2>
                <ul class="ost-rank-list ost-client-border">
                  <li class="rank-item"><a class="ost-game-name" href="#">英雄联盟</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">穿越火线</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">地下城与勇士</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">足球在线4(FC ONLINE)</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">NBA2K Online2</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">QQ飞车</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">QQ炫舞</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">QQ三国</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">逆战</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">天涯明月刀</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">QQ炫舞2</a></li>
                </ul>
              </div>
              <div class="ost-rank-col fl">
                <h2 class="ost-rank-title ost-client-new">
                  新品推荐
                </h2>
                <ul class="ost-rank-list ost-client-border">
                  <li class="rank-item"><a class="ost-game-name" href="#">无畏契约</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">命运方舟</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">晨昏线</a></li>
                  <li class="rank-item"><a class="ost-game-name" href="#">全境封锁2</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="ost-mobile fl">
            <div class="ost-title">手机游戏</div>
            <div class="ost-list"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 顶部导航 -->
  <header class="top-nav">
    <div class="main-nav">
      <h1 class="fl"><a href="#">王者荣耀</a></h1>
      <nav class="fl">
        <ul>
          <li class="fl"><a href="#">游戏资料<span>DATA</span></a></li>
          <li class="fl"><a href="#">内容中心<span>CONTENTS</span></a></li>
          <li class="fl"><a href="#">赛事中心<span>MATCH</span></a></li>
          <li class="fl"><a href="#">百态王者<span>CULTURE</span></a></li>
          <li class="fl"><a href="#">社区互动<span>COMMUNITY</span></a></li>
          <li class="fl"><a href="#">玩家支持<span>PLAYER</span></a></li>
          <li class="fl"><a href="#">IP新游<span>NEW GAMES</span></a></li>
        </ul>
      </nav>
      <div class="login-pannel fr">
        <a href="" class="avatar fl"></a>
        <div class="unlogin fl">
          <a href="" class="block">欢迎登陆</a>
          <span>登录后查看游戏战绩</span>
        </div>
      </div>
    </div>
    <div class="sub-nav"></div>
  </header>
  <!-- 海报 -->
  <div class="bg-wrapper">
    <div class="bg"></div>
    <a href="#" title="查看详情">查看详情</a>
  </div>
  <!-- 内容区域 -->
  <div class="content"></div>
  <!-- 右侧导航 -->
  <div class="r-nav"></div>
  <!-- 页脚 -->
  <div class="nav-footer"></div>
  <script src="js/index.js"></script>
</body>

</html>